<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>机构名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="机构名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>注册时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.registerDay"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择注册时间">
                    </el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <label>到期时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.expireTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择到期时间">
                    </el-date-picker>
                </div>
            </div>
            <div class="search-item">
                <label>所属大区：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.areaCode"
                        filterable
                        clearable
                        placeholder="请选择大区"
                    >
                        <el-option
                            v-for="item in areas"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>所属区域：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.regionCode"
                        filterable
                        clearable
                        placeholder="请选择区域"
                    >
                        <el-option
                            v-for="item in regions"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>用户类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.groupUserType"
                        placeholder="请选择用户类型"
                    >
                        <el-option
                            label="正式用户"
                            value="formal"
                        ></el-option>
                        <el-option
                            label="试用用户"
                            value="trial"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                default-expand-all
                @selection-change="tableSelectionChange"
            >
                <el-table-column
                    prop="name"
                    label="机构名"
                    min-width="80"
                ></el-table-column>

                <el-table-column
                    prop="userNameOther"
                    label="联系人"
                    min-width="40"
                ></el-table-column>

                <el-table-column
                    prop="areaName"
                    label="所属大区"
                    min-width="40"
                ></el-table-column>
                <el-table-column
                    prop="regionName"
                    label="所在地区"
                    min-width="40"
                ></el-table-column>

                <el-table-column
                    prop="groupUserType"
                    label="用户类型"
                    min-width="40"
                    align="center"
                >
                    <template slot-scope="scope">
                        <k-tag :tag="groupStatus[scope.row.groupUserType]"></k-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="是否有效" width="100">
                    <template slot-scope="scope">
                        <k-tag :tag=" scope.row.status ? {desc: '有效', color: '#6ADA8D'} :  {desc: '失效', color: '#fb4e4e'} "></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="注册时间"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="expireTime"
                    label="有效期"
                    width="100"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">

                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="reBind(scope.row)"
                        >关联
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {TablePage, objSign} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post} from "@/api/request";
import groupLogComponent from "@/views/models/vrs/group/groupRenewalLog";
import groupIpComponent from "@/views/models/vrs/group/groupIp";
import {reBindIp, unBindIp} from "@/api/user";


export default {
    name: "GroupBind",
    components: {groupLogComponent, groupIpComponent},
    mixins: [TablePage],
    props: {
        groupIpId: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            queryData: {
                base:true,
                name: null,
                registerDay: null,
                expireTime:null,
                areaCode:null,
                regionCode:null,
                groupUsertype:null,
            },
            initAddForm: {
                id: null,
                name: null,
                type: "center",
                userName: null,
                mobile: null,
                email: null,
                yCode: null,
                address: null,
                areaCode: null,
                regionCode: null,
                groupUserType: "formal",
                expireTime: null,
                statisticalOpen: false,
                statisticalShow: false,
                showAlias: false,
                remark: null,
                alias: null,
                other: null,

            },
            areas: null,
            regions: null,
            regions2: null,
            flag: {
                areaFlag: false,
                regionFlag: false,
                regionFlag2: false,
            },
            status: [
                {
                    code: "trial",
                    desc: "试用用户"
                },
                {
                    code: "formal",
                    desc: "正式用户"
                }
            ],
            type: [
                {
                    code: "center",
                    desc: "中心机构"
                },
                {
                    code: "mirror",
                    desc: "镜像机构"
                }
            ],
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入机构名称",
                        trigger: "blur"
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "长度在 2 到 20 个字符",
                        trigger: "blur"
                    }
                ],
                type: [
                    {
                        required: true,
                        message: "选择机构类型",
                        trigger: "change"
                    }
                ],
                userName: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur"
                    }
                ],
                mobile: [
                    {
                        required: true,
                        message: "请输入联系方式",
                        trigger: "blur"
                    }
                ],
                areaCode: [
                    {
                        required: true,
                        message: "请选择大区",
                        trigger: "change"
                    }
                ],
                regionCode: [
                    {
                        required: true,
                        message: "请选择区域",
                        trigger: "change"
                    }
                ],
                groupUserType: [
                    {
                        required: true,
                        message: "请选择用户类型",
                        trigger: "change"
                    }
                ],
                expireTime: [
                    {
                        required: true,
                        message: "请选择到期时间",
                        trigger: "blur"
                    }
                ],
            },
            expireTimeFormTitle: null,
            expireTimeFormVisible: false,
            expireTimeForm: {
                id: null,
                name: null,
                oldExpireTime: null,
                newExpireTime: null,
                remark: null,
            },
            expireTimeFormRule: {
                newExpireTime: [
                    {
                        required: true,
                        message: "请选择到期时间",
                        trigger: "blur"
                    }
                ]
            },
            groupLogFormTitle: null,
            groupLogFormVisible: false,
            groupLogGrupId: null,
            groupIpFormTitle: null,
            groupIpFormVisible: false,
            groupIpGrupId: null,
        };
    },
    computed: {
        ...mapState({
            groupStatus: state => state.status.groupStatus,
        }),
    },
    watch: {

    },
    created() {
        this.loadArea();
        this.loadRegion()
    },
    mounted() {
    },
    methods: {
        search(queryData) {
            this.loadTable("/user/sys/group/page", queryData, true,);
        },
        reBind(data) {
            this.$emit("bind",data.id)

        },
        updateExpireTime(data, title) {
            this.expireTimeFormVisible = true;
            this.expireTimeFormTitle = title;
            this.expireTimeForm.id = data.id;
            this.expireTimeForm.name = data.name;
            this.expireTimeForm.oldExpireTime = data.expireTime;
            this.expireTimeForm.newExpireTime = null;
            this.expireTimeForm.remark = null;

        },
        groupLog(data, title) {
            this.groupLogFormVisible = true;
            this.groupLogFormTitle = title;
            this.groupLogGrupId = data.id;
        },
        groupIp(data, title) {
            this.groupIpFormVisible = true;
            this.groupIpFormTitle = title;
            this.groupIpGrupId = data.id;
        },
        expireTimeFormSave() {
            this.$refs.expireTimeFormRef.validate(valid => {
                if (valid) {
                    this.submitFlag = true;
                    put("/user/sys/group/update-expire", this.expireTimeForm).then(res => {
                        this.expireTimeFormVisible = false;
                        this.search();
                    }).finally(() => {
                        this.submitFlag = false;
                    })
                } else {
                    j();
                }
            });
        },
        loadArea(query) {
            return this.flagPromise(
                get("/user/sys/dict/detail/listByTypeCode", {
                    name: query,
                    typeCode: "area"
                }).then(res => {
                    this.areas = res;
                    return res;
                }),
                "areaFlag"
            );
        },
        loadRegion() {
            this.regions = [];
            this.queryData.regionCode = null;
            return this.flagPromise(
                get("/user/sys/dict/detail/listByTypeCode", {
                    typeCode: "region"
                }).then(res => {
                    this.regions = res;
                    return res;
                }),
                "regionFlag"
            );
        },
    }
};
</script>

<style lang="scss" scoped>

.step {
    padding: 0.3rem 0;
    background: #f1f1f1;
}

.setting-process {
    .setting-p {
        margin: 0.7em 0;
    }

    .cover {
        width: 6em;
        height: 8rem;
        border-radius: 0.4rem;
        border: 1px solid #ececec;
        margin-bottom: 0.2rem;
    }
}

.drawer {
    position: relative;

    .records {
        position: absolute;
        left: 0;
        bottom: 2em;
        width: 100%;

        .p-title {
            margin-bottom: 30px;
        }

        .step {
            overflow: auto;
        }

        .icon-header {
            width: 30px;
            border-radius: 50%;
        }

        .row-til {
            white-space: nowrap;
        }
    }

    .op-box {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0.3em 0;
        box-shadow: 0px 0px 14px -8px rgba(0, 0, 0, 0.67);
    }
}
</style>
<style>
.group.i-dialog {
    margin-top: 5vh !important;
    width: fit-content;
}

.header .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.header .avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.header .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.header .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
